<template>
  <!-- 一条文章单元格 -->
  <van-cell @click="$router.push(`/article?art_id=${artObj.art_id}`)">
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{ artObj.title }}</span>
         <!-- 单图 -->
        <img
          v-if="artObj.cover.type === 1"
          class="thumb"
          v-lazy="artObj.cover.images[0]" />
      </div>
        <!-- 三张图片 -->
        <div class="thumb-box"
             v-if="artObj.cover.type > 1">
          <img
            v-for="(imgUrl, idx) in artObj.cover.images"
            :key="idx"
            class="thumb"
            v-lazy="imgUrl" />
        </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <div>
          <span>作者 {{ artObj.aut_name }}</span>
          <span>{{ artObj.comm_count }} 评论</span>
          <span>发布时期 {{ $timeAgo(artObj.pubdate) }}</span>
        </div>
        <!-- 反馈按钮 -->
        <van-icon name="cross" @click.stop="isShow1 = true" v-if="showCross" />
        <!-- 一级反馈面板 -->
        <van-action-sheet
          v-model="isShow1"
          title="一级反馈面板"
          :actions="firstActions"
          @select="onSelectFn"
          cancel-text="取消"
          get-container="body"/>
         <!-- 二级反馈面板 -->
         <van-action-sheet
            v-model="isShow2"
            title="二级反馈面板"
            :actions="secondActions"
            @select="onSelectFn"
            cancel-text="返回"
            get-container="body"/>
          <!-- 反馈其它问题的弹出层 -->
          <van-dialog
              v-model="show"
              title="反馈其它问题"
              show-cancel-button
              get-container="body"
              :before-close="onBeforeCloseFn"
            >
            <van-field
              v-jujiao
              v-model.trim="msg"
              type="textarea"
              placeholder="请输入反馈内容"/>
          </van-dialog>
      </div>
    </template>
  </van-cell>
</template>

<script>
import { FIRST_ACTIONS, SECOND_ACTIONS } from '@/constant'
import { articleDislikeAPI, articleReportAPI } from '@/api/home'
export default {
  name: 'ArticleItem',
  props: {
    // 父传子 - 文章对象
    artObj: {
      type: Object,
      required: true
    },
    i: Number,
    // 控制X的可见性
    showCross: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isShow1: false, // 控制一级面板的可见性
      isShow2: false, // 控制二级面板的可见性
      firstActions: FIRST_ACTIONS, // 一级面板数据列表
      secondActions: SECOND_ACTIONS, // 二级面板数据列表
      show: false, // 控制反馈其它问题弹出层的可见性
      msg: '' // 其它问题的内容
    }
  },
  methods: {
    // 弹出层关闭前的回调函数
    async onBeforeCloseFn (action, done) {
      if (action === 'cancel') {
        done()
        return
      }
      if (!this.msg) {
        this.$toast.fail('请输入反馈内容')
        done(false)
        return
      }
      try {
        // 发请求
        await articleReportAPI({
          artId: this.artObj.art_id,
          type: '0',
          remark: this.msg
        })
        this.$toast.success('反馈成功')
        this.msg = ''
      } catch (e) {
        this.$toast.fail('反馈出错')
      } finally {
        done()
      }
    },
    // 选择反馈
    async onSelectFn ({ id, name }) {
      if (id === 11) { // 不感兴趣
        try {
          // 1. 调接口，让后台删除这篇文章
          await articleDislikeAPI({
            artId: this.artObj.art_id
          })
          this.$toast.success('操作成功')
          // 2. 从vue变量中删除当前文章对象（数据驱动视图）
          this.$emit('del-art', this.i)
          this.isShow1 = false
        } catch (e) {
          this.$toast.fail('操作出错')
        }
      } else if (id === 22) { // 反馈垃圾内容
        // 显示二级反馈
        this.isShow2 = true
      } else if (id === 33) { // 拉黑作者

      } else {
        if (id === 0) { // 其它问题
          this.isShow1 = this.isShow2 = false
          this.show = true
        } else { // 二级正常的反馈
          try {
            await articleReportAPI({
              artId: this.artObj.art_id,
              type: id + '',
              remark: name
            })
            this.$toast.success('举报成功')
          } catch (e) {
            this.$toast.success('举报出错')
          } finally {
            this.isShow1 = this.isShow2 = false
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span{
  margin: 0 3px;
  &:first-child{
    margin-left: 0;
  }
}
/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
